<template>
  <div class="">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in detailData.pics" :key="index">
        <img :src="item.pic" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品信息 -->
    <div class="goodsMsg" v-if="flag">
      <p>
        {{
          detailData.basicInfo.characteristic
            ? detailData.basicInfo.characteristic
            : " 网络有点慢"
        }}
      </p>
    </div>
    <!-- 商品介绍商品评价 -->
    <article>
      <div class="tap">
        <div :class="{ active: goosActive == 0 }" @click="goosActive = 0">
          商品介绍
        </div>
        <div :class="{ active: goosActive == 1 }" @click="goosActive = 1">
          暂无数据
        </div>
      </div>
      <div v-if="goosActive == 0" class="introduce">
        <div v-html="detailData.content"></div>
      </div>
      <div v-else class="evaluate">商品评价</div>
    </article>
    <!-- 底部 -->
    <van-goods-action placeholder>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        @click="$router.push('/ShoppingCard')"
        icon="cart-o"
        text="购物车"
        badge="12"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        @click="joinShopping"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 加入购物车 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <template>
        <div>
          <div
            class="tup"
            v-for="(item, index) in detailData.properties"
            :key="index"
          >
            <div class="title">{{ item.name }}</div>
            <ul class="spu">
              <li
                :class="{ active: skuActive.includes(value) }"
                @click="skuActiveStyle(index, value)"
                class="sku"
                v-for="(value, key) in item.childsCurGoods"
                :key="key"
              >
                {{ value.name }}
              </li>
            </ul>
          </div>

          <van-stepper v-model="num" />
          <van-button @click="addGoods" size="normal" type="info"
            >添加</van-button
          >
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script>
import { getDetailData, getEvaluateData } from "@/network/request.js";
import { Toast } from "vant";

export default {
  data() {
    return {
      detailData: [],
      goosActive: 0,
      flag: false,
      id: 0,
      show: false,
      num: 1,
      skuActive: [],
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    getDetailData(this.id).then(({ data }) => {
      console.log(data.data);
      this.detailData = data.data;
      this.flag = true;
    });
    getEvaluateData(this.id).then((res) => {
      console.log(res);
    });
  },
  methods: {
    // 加入购物车
    joinShopping() {
      if (!localStorage.getItem("token")) {
        this.$router.push({
          path: "/login",
          query: { id: this.id },
        });
      } else {
        this.show = true;
      }
    },
    // 选中添加样式
    skuActiveStyle(index, val) {
      if (this.skuActive[index] == val) {
        this.skuActive.splice(index, 1);
      } else {
        this.$set(this.skuActive, index, val);
      }
    },
    // 添加商品
    addGoods() {
      let obj = {
        num: this.num,
        characteristic: this.detailData.basicInfo.characteristic,
        img: this.detailData.basicInfo.pic,
        name: this.detailData.basicInfo.name,
        checked: false,
        id: new Date().toString(),
        originalPrice: this.detailData.basicInfo.originalPrice,
      };
      Toast.success("添加成功");
      this.$store.commit("addGoods", obj);
      this.show = false;
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.my-swipe {
  width: 100%;
  height: 250px;
  van-swipe-item,
  img {
    width: 100%;
    height: 100%;
  }
}
.title {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.goodsMsg {
  width: 100%;
  height: 100px;
  background-color: rgb(22, 182, 231);
}
.tap {
  width: 100%;
  height: 50px;
  display: flex;
  div {
    flex: 1;
    line-height: 50px;
    text-align: center;
  }
  .active {
    background-color: rgb(189, 48, 48);
  }
}
.spu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 200px;
    height: 32px;
    border: 1px solid rgb(201, 198, 198);
    line-height: 32px;
    margin: 2px;
    text-align: center;
  }
  .active {
    border: 1px solid rgb(224, 16, 16);
  }
}

/deep/ img {
  width: 100% !important;
}
</style>
